<template>
  <main class="workingfill">
    <el-row :gutter="20">
      <el-col class="workingfill-left" :span="10">
        <el-card class="workingfill-left-box-card">
          <div slot="header" class="clearfix">
            <span>工时填报</span>
          </div>
          <div class="workingfill-left-box-card-body">
            <el-select
              v-model="selYear"
              placeholder="请选择"
              @change="handleSelYear"
            >
              <el-option
                v-for="item in yearList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select
              style="float: right; width: 8rem"
              v-model="selMonth"
              placeholder="请选择"
              @change="handleSelMonth"
            >
              <el-option
                v-for="item in monthList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-calendar v-model="value">
              <template slot="dateCell" slot-scope="{ data }">
                <p :class="data.isSelected ? 'is-selected' : ''">
                  {{ data.day.split("-").slice(2).join("-") }}
                  {{ data.isSelected ? nowDate(data) : "" }}
                  {{ data.isSelected ? "✔️" : "" }}
                </p>
              </template></el-calendar
            >
          </div>
        </el-card>
      </el-col>
      <el-col class="workingfill-right" :span="14">
        <el-card class="workingfill-right-box-card">
          <div slot="header" class="clearfix">
            <span>{{ this.nowTime }}</span>
            <el-button
              @click="handleDrawer"
              type="text"
              style="float: right; padding: 3px 0"
              ><i class="el-icon-plus"></i
            ></el-button>
          </div>
          <section v-if="workHours.length" class="des">
            <div v-for="(it, index) in workHours" :key="index" class="des-item">
              <el-descriptions title="工时信息" :border="true">
                <template slot="extra">
                  <div>
                    <el-button
                      type="primary"
                      plain
                      icon="el-icon-edit"
                      size="mini"
                      @click="handleEdit(it)"
                      >编辑</el-button
                    >
                    <el-button
                      type="danger"
                      plain
                      icon="el-icon-delete"
                      size="mini"
                      @click="handleDel(it)"
                      >删除</el-button
                    >
                  </div>
                </template>
                <el-descriptions-item label="工时类型">
                  <el-tag type="success" size="small">{{ it.type }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="项目名称">
                  <span style="color: #3ef07a; font-size: 1.3rem">
                    {{ it.project }}
                  </span>
                </el-descriptions-item>
                <el-descriptions-item label="工作时长">
                  <span style="color: #367fff; font-size: 1.5rem">
                    {{ it.hours }}
                  </span></el-descriptions-item
                >
                <el-descriptions-item label="所属部门">
                  <el-tag size="small" type="success" effect="plain">{{
                    it.branch
                  }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="工时状态">
                  <el-tag
                    v-if="it.check"
                    size="small"
                    type="success"
                    effect="plain"
                  >
                    已审核(得分10)
                  </el-tag>
                  <el-tag v-else size="small" type="danger" effect="plain">
                    未审核
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="审核人">
                  <el-tag size="small" type="success" effect="light">
                    {{ it.checkper }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="工作内容" style="display: block">
                  <span class="work-content">{{ it.content }}</span>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </section>
          <HEmpty v-else></HEmpty>
        </el-card>
      </el-col>
    </el-row>
    <HDrawer :drawerVisible.sync="drawerVisible" title="工时-新增">
      <section class="drawer-body">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="类型：" prop="type">
            <el-radio-group v-model="form.type" size="small">
              <el-radio-button label="项目工时"></el-radio-button>
              <el-radio-button label="非项目工时"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工作日期：">
            <el-input
              :placeholder="nowTime"
              v-model="form.date"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="项目：" prop="project">
            <el-select v-model="form.project" placeholder="请选择项目">
              <el-option
                v-for="it in projectList"
                :key="it.value"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="归属部门：" prop="branch">
            <el-select v-model="form.branch" placeholder="请选择归属部门">
              <el-option
                v-for="it in branchList"
                :key="it.value"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任务：" prop="task">
            <el-select v-model="form.task" placeholder="请选择工作任务">
              <el-option
                v-for="it in taskList"
                :key="it.value"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工时(小时)：" prop="hours">
            <el-input v-model="form.hours" placeholder="请输入工时"></el-input>
          </el-form-item>
          <el-form-item label="工作内容：" prop="content">
            <el-input
              v-model="form.content"
              type="textarea"
              placeholder="请填写工作内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="h-drawer__footer">
          <el-button @click="cancelForm" size="small">取 消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="handleSubmit"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </section>
    </HDrawer>
    <el-drawer title="工时-更新" :visible.sync="drawer" :direction="direction">
      <section class="drawer-body">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="类型：" prop="type">
            <el-radio-group v-model="form.type" size="small">
              <el-radio-button label="项目工时"></el-radio-button>
              <el-radio-button label="非项目工时"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="工作日期：">
            <el-input
              :placeholder="nowTime"
              v-model="form.date"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="项目：" prop="project">
            <el-select v-model="form.project" placeholder="请选择项目">
              <el-option
                v-for="it in projectList"
                :key="it.value"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="归属部门：" prop="branch">
            <el-select v-model="form.branch" placeholder="请选择归属部门">
              <el-option
                v-for="it in branchList"
                :key="it.value"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任务：" prop="task">
            <el-select v-model="form.task" placeholder="请选择工作任务">
              <el-option
                v-for="it in taskList"
                :key="it.value"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工时(小时)：" prop="hours">
            <el-input v-model="form.hours" placeholder="请输入工时"></el-input>
          </el-form-item>
          <el-form-item label="工作内容：" prop="content">
            <el-input
              v-model="form.content"
              type="textarea"
              placeholder="请填写工作内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="h-drawer__footer">
          <el-button @click="cancelForm" size="small">取 消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="handlePutSubmit"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </section>
    </el-drawer>
    <!-- <HDrawer :drawerVisible.sync="drawerVisible" title="工时-编辑">
      
    </HDrawer> -->
  </main>
</template>

<script>
import HDrawer from '../components/drawer/HDrawer.vue';
import HEmpty from '../components/empty/HEmpty.vue'
export default {
  name: 'Workingfill',
  components: { HDrawer, HEmpty },
  data () {
    return {
      drawer: false,
      direction: 'rtl',
      year: new Date().getFullYear(),
      month: new Date().getMonth(),
      day: new Date().getDay(),
      value: new Date(),
      nowTime: null,
      yearList: [],
      selYear: new Date().getFullYear(),
      monthList: [],
      selMonth: new Date().getMonth() + 1,
      drawerVisible: false,
      form: {
        type: '项目工时',
        date: this.nowTime,
        project: '',
        branch: '',
        task: '',
        hours: '',
        content: ''
      },
      projectList: [
        {
          label: '工时系统软件开发项目',
          value: "工时系统软件开发项目"
        },
        {
          label: '大屏可视化软件开发项目',
          value: "大屏可视化软件开发项目"
        }
      ],
      branchList: [
        {
          label: '软件开发部',
          value: 'b001'
        },
        {
          label: '产品设计部',
          value: 'b002'
        },
        {
          label: '软件测试部',
          value: 'b003'
        },
        {
          label: '软件销售部',
          value: 'b004'
        },
        {
          label: '综合管理部',
          value: 'b005'
        }
      ],
      taskList: [
        {
          label: '软件开发',
          value: 'r001'
        },
        {
          label: '产品设计',
          value: 'r002'
        },
        {
          label: '软件测试',
          value: 'r003'
        },
        {
          label: '软件销售',
          value: 'r004'
        },
        {
          label: '综合管理',
          value: 'r005'
        }
      ],
      rules: {
        type: [
          { required: true, message: '请选择工时类型', trigger: 'blur' },
        ],
        project: [
          { required: true, message: '请选择项目', trigger: 'change' }
        ],
        branch: [
          { type: 'date', required: true, message: '请选择归属部门', trigger: 'blur' }
        ],
        task: [
          { required: true, message: '请选择工作任务', trigger: 'blur' }
        ],
        hours: [
          { required: true, message: '请填写工时', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写工作内容', trigger: 'blur' }
        ]
      },
      loading: false,
      timer: null,
      workHours: [], // 工时内容
      workVisible: false, // 是否显示编辑和删除
    }
  },
  mounted () {
    this.getYearOption(); // 获取年份下拉数据
    this.getMonthOption(); // 获取月份下拉数据
    this.getWorkList() // 获取工时列表
  },
  methods: {
    handleDrawer () {  // drawer的显示和隐藏
      this.drawerVisible = true;
      this.form = {
        type: '项目工时',
        date: this.nowTime,
        project: '',
        branch: '',
        task: '',
        hours: '',
        content: ''
      }
    },
    handleSelYear () {
      // console.log(this.selYear, 'lllll');
      this.value = '';
      this.value = this.selYear.toString()
    },
    handleSelMonth () {
      // console.log(this.selMonth, this.value, 'lllll');
      console.log(this.value)
      this.value += ('-' + this.selMonth);
    },
    getYearOption () {
      let year = new Date().getFullYear();
      console.log(year, typeof year);
      for (let i = 0; i < 10; i++) {
        const item = year--;
        this.yearList.push({
          label: item + '年',
          value: item
        })
      }
    },
    getMonthOption () {
      for (let i = 1; i < 13; i++) {
        this.monthList.push({
          label: i + '月',
          value: i
        })
      }
    },
    cancelForm () { // 取消drawer
      this.drawerVisible = false;
      clearTimeout(this.timer)
    },
    handleSubmit () { // 提交表单
      this.loading = true;
      this.$http.post('/workfill', { data: Object.assign(this.form, { date: this.nowTime }) })
        .then(res => {
          // console.log(res, '新建工时post返回数据');
          if (res) {
            this.loading = false;
            this.drawerVisible = false;
            this.$message({
              type: 'success',
              message: '工时新建完成'
            });
            this.getWorkList(); // 重新get请求列表数据
          }
        })
    },
    async getWorkList () { // 获取工时列表数据
      const res = await this.$http.get('/workfill');
      this.workHours = res?.data?.data || []; // 没有数据数组置空
    },
    handleEdit (res) { // 编辑操作
      console.log(res);
      this.drawer = true;
      this.form = res;
    },
    handlePutSubmit () {
      this.loading = true;
      console.log(this.form, 'LLLLLLLLLLLL')
      this.$http.put('/workfill', { data: Object.assign(this.form, { date: this.nowTime }) })
        .then(res => {
          // console.log(res, '新建工时post返回数据');
          if (res) {
            this.loading = false;
            this.drawer = false;
            this.$message({
              type: 'success',
              message: '工时更新完成'
            });
            this.getWorkList(); // 重新get请求列表数据
          }
        })
    },
    handleDel (res) {  // 删除操作
      console.log(res)
      this.$http.delete('/workfill', { data: { id: res.id } }).then(res => {
        if (res.status === 200) {
          this.getWorkList()  // 更新列表
          this.$message({
            type: 'success',
            message: '工时删除成功'
          })
        }
      }).catch(err => {
        this.$message({
          type: 'success',
          message: '工时删除失败' + err
        })
      })
    }
  },
  computed: {
    nowDate () {
      return function (date) {
        console.log(typeof date.day);
        this.nowTime = date?.day;
      }
    },
    newValue () {
      return ''
    }
  }
}
</script>
<style lang="scss" scoped>
.workingfill {
  width: auto;
  height: auto;
  padding: 2rem 2rem;
  // background: #845;
  &-left {
    height: 64rem;
    &-box-card {
      height: 100%;
      .clearfix {
        span {
          font-size: 1.6rem;
          font-weight: 700;
          color: #000000;
        }
      }
    }
  }
  &-right {
    height: 64rem;
    &-box-card {
      height: 100%;
      .clearfix {
        span {
          font-size: 1.6rem;
          font-weight: 700;
          color: #000000;
        }
      }
      ::v-deep .el-descriptions__title {
        color: #1890ff;
      }
    }
    .des {
      max-height: 55rem;
      overflow-y: auto;
    }
    .des-item {
      margin-bottom: 1rem;
      transition: all 0.5s linear;
    }
    .work-content {
      color: #000;
      // border: 1px dashed #67c23a;
      display: inline-block;
      border-radius: 0.2rem;
      padding: 1rem;
      font-size: 1.3rem;
    }
  }
  .drawer-body {
    width: 90%;
    ::v-deep .el-form {
      .el-form-item__label {
        font-size: 1.3rem;
      }
    }
    .el-select {
      width: 100%;
    }
    .h-drawer__footer {
      position: absolute;
      right: 2rem;
      bottom: 2rem;
    }
  }
  ::v-deep .el-calendar-table .el-calendar-day {
    box-sizing: border-box;
    font-size: 1.2rem;
    height: 5rem !important;
    width: 5rem;
    margin: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ::v-deep .el-calendar-table td {
    border-bottom: 0px;
    border-right: 0px;
    transition: background-color 0.2s ease;
  }
  ::v-deep .el-calendar-table tr td:first-child {
    border-left: 10px;
  }
  ::v-deep .el-calendar-table tr:first-child td {
    border-top: 0px;
  }
  ::v-deep .el-calendar-table td.is-selected {
    background-color: #1890ff;
    color: #ffffff;
    height: 5rem !important;
    width: 5rem;
    padding: 0;
  }
  ::v-deep .el-calendar-table .el-calendar-day:hover {
    cursor: pointer;
    background-color: #1890ff;
  }
  [class*=" el-icon-"],
  [class^="el-icon-"] {
    // 添加按钮
    background: #1890ff;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.2rem;
  }
  [class^="el-icon-"]:hover {
    opacity: 0.6;
    transition: opacity 0.2s ease-in-out;
  }
  ::v-deep .el-calendar__header {
    // 隐藏日历头部进行定制化
    .el-calendar__title,
    .el-calendar__button-group {
      display: none;
    }
  }
  .el-select {
    width: 10rem;
    height: 3rem;
  }
  ::v-deep .el-input__inner {
    height: 3rem;
    line-height: 3rem;
  }
  ::v-deep .el-input__icon {
    line-height: 3rem;
  }
}
</style>
